<template>
  <main-box>
    <PlusSearch
      ref="formRef"
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-xs"
      @search="initData(true)"
      @reset="initData(true)"
    />
    <div class="mb-2">
      <el-button type="primary" :icon="Plus" @click="showAdd(false)"
        >新增</el-button
      >
      <el-button type="danger" :icon="Delete" @click="handleDel()"
        >删除</el-button
      >
      <btnExport
        :exportApi="excelApi"
        :queryform="queryform"
        download-name="工具室"
      />
    </div>
    <PureTable
      ref="tableRef"
      border
      adaptive
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="initData()"
      @page-current-change="initData(false)"
      @selection-change="handleSelectionChange"
      ><template #networkState="{ row }">
        <el-tag v-if="row.networkState == 1" type="success">在线</el-tag>
        <el-tag v-else type="info">下线</el-tag>
      </template>
      <template #state="{ row }">
        <el-tag v-if="row.state == 1" type="primary">使用中</el-tag>
        <el-tag v-else type="danger">停用</el-tag>
      </template>
      <template #action="{ row }">
        <div class="btn-link">
          <el-link :underline="false" type="primary" @click="showAdd(row)"
            >设置</el-link
          >
          <el-link
            v-if="row.state == 1"
            type="danger"
            :underline="false"
            @click="handleState(row)"
            >停用</el-link
          >
          <el-link
            v-else
            :underline="false"
            type="success"
            @click="handleState(row)"
            >启用</el-link
          >
          <el-link :underline="false" type="primary" @click="showDict(row)"
            >字典</el-link
          >
          <el-link
            type="primary"
            :underline="false"
            :href="`/#/board?warehouseId=${row.warehouseId}`"
            target="_blank"
            >数据大屏</el-link
          >
        </div>
      </template>
    </PureTable>
    <!-- 新增/编辑 -->
    <add ref="addRef" @confirm="isEidt => initData(!isEidt)" />
    <!-- 字典配置 -->
    <dict ref="dictRef" />
  </main-box>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { ElMessageBox, ElMessage } from "element-plus";
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import { Plus, Delete } from "@element-plus/icons-vue";

import add from "./modules/add.vue";
import dict from "./modules/dict.vue";
import btnExport from "@/components/btnExport/index.vue";
import { getList, stateApi, excelApi, delApi } from "@/api/warehouse";

/* 查询表单 */
const formConfig: PlusColumn[] = [
  {
    label: "查询",
    prop: "searchValue",
    fieldProps: {
      placeholder: "具室序列号/名称/管理员"
    }
  }
];
const queryform = ref({ searchValue: "" });

/* 列表数据 */
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  {
    type: "selection",
    align: "left"
  },
  { label: "工具室编号", prop: "endpointId" },
  { label: "工具室名称", prop: "name" },
  { label: "货架数量", prop: "facilityCount" },
  {
    label: "管理员",
    prop: "sysUserVoList",
    formatter: ({ sysUserVoList }) => {
      if (sysUserVoList) {
        const arr = [];
        sysUserVoList.map(item => {
          if (item) {
            arr.push(item.nickName || item.userName);
          }
        });
        return arr.join(", ");
      }
      return "";
    }
  },
  {
    label: "联网状态",
    prop: "networkState",
    slot: "networkState"
  },
  {
    label: "使用状态",
    prop: "state",
    slot: "state"
  },
  { label: "添加时间", prop: "createTime" },
  { label: "操作", prop: "action", fixed: "right", slot: "action" }
];

onMounted(() => {
  initData();
});
const initData = (needInit = true) => {
  if (needInit) {
    pagination.currentPage = 1;
  }
  const params = {
    ...queryform.value,
    pageSize: pagination.pageSize,
    pageNum: pagination.currentPage
  };
  getList(params).then(res => {
    tableData.value = res.rows;
    pagination.total = Number(res.total);
  });
};

const handleState = ({ warehouseId, state }) => {
  const txt = state == 1 ? "停用" : "启用";
  ElMessageBox.confirm(`您确认${txt}该工具室?`, `工具室${txt}确认`, {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      stateApi({ warehouseId }).then(res => {
        ElMessage.success(`${txt}成功`);
        initData(false);
      });
    })
    .catch(() => {});
};

/* 新增操作 */
const addRef = ref(null);
const showAdd = (row = null) => {
  addRef.value.show(row ?? false);
};

/* 批量删除 */
const multipleSelection = ref([]);
const tableRef = ref(null);

const handleSelectionChange = val => {
  multipleSelection.value = val;
};
const handleDel = () => {
  if (!multipleSelection.value.length) {
    return ElMessage.warning("请先选择需要删除的工具室");
  }
  const warehouseIds = multipleSelection.value.map(item => item.warehouseId);
  delApi({ warehouseIds }).then(res => {
    ElMessage.success("删除成功");
    initData(true);
  });
};

/* 字典操作 */
const dictRef = ref(null);
const showDict = row => {
  dictRef.value.show(row);
};
</script>
